<!--
 * @Author: Baishui
 * @Date: 2021-09-29 20:52:43
 * @LastEditors: Baishui
 * @LastEditTime: 2021-09-29 21:21:44
 * @Description: file content
-->
<template>
  <div class="maptalks" id="maptalks"> maptalks </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted } from 'vue'
  import 'maptalks/dist/maptalks.css'
  import * as maptalks from 'maptalks'

  export default defineComponent({
    name: 'Maptalks',
    components: {},
    setup() {
      const state = reactive({})

      onMounted(() => {
        const map = new maptalks.Map('maptalks', {
          center: [-0.113049, 51.498568],
          zoom: 14,
          baseLayer: new maptalks.TileLayer('base', {
            urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            // urlTemplate: 'http://a.basemaps.cartocdn.com/light_all/b/c/d.png',
            subdomains: ['a', 'b', 'c', 'd'],
            // attribution:
            //   '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
          }),
        })
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>
<style lang="less" scoped>
  .maptalks {
    width: 100%;
    height: 800px;
  }
</style>
